<template>
	<div class="util">
		<el-button type="primary" plain @click="add">
			<el-icon><Avatar /></el-icon>
			<span>添加角色</span>
		</el-button>
	</div>
     <div>
		 <el-table :data="tableData.records">

			<el-table-column label="角色" prop="name"></el-table-column>
			<el-table-column label="说明" prop="description"></el-table-column>
			<el-table-column label="权限" prop="permission"></el-table-column>
 
			 <el-table-column label="状态" >
				<template #default = "scope">
					<el-tag type="success" v-if="scope.row.status ">启用</el-tag>
					<el-tag type="danger" v-else >禁用</el-tag>
				</template>
			 </el-table-column>
			
			
			<el-table-column width="310px">
				<template #default = "scope">
					<template v-if="scope.row.status" >
						<el-button type="primary" plain size="small" @click="update(scope.row.id)">修改</el-button>
						<el-button type="danger" plain size="small" @click="del(scope.row.id,0)">删除</el-button>
						<el-button type="success" plain size="small" @click="adminList(scope.row.id)">管理员</el-button>
						<el-button type="success" plain size="small" @click="resList(scope.row.id)">分配权限</el-button>
					</template>
					<el-button v-else type="warning" plain size="small" @click="del(scope.row.id,1)">启用</el-button>
				</template>
			</el-table-column>	
		</el-table>
		 		<el-pagination style="margin-top: 10px;" background 
		 		v-model:current-page = "params.PageNo" :page-count = "tableData.pages" :total="tableData.total"
		 		@current-change = "getTableData"/>

		 <el-dialog v-model="dialog.show" 
		 		:title="dialog.title" 
		 		width="450px"
		 		:close-on-click-modal = "false">
		 	<Add
		 	 v-if="dialog.show"
		 	 @getTableData = "getTableData" 
		 	 v-model:show="dialog.show" 
		 	 :id="dialog.id"
		 	 /> 
		 </el-dialog>
		 <el-dialog
		     v-model="adminDialog.show"
		 	title="关联管理员"
		 	width="600px"
		 	:close-on-click-modal = "false">
		 	<Admin 
		 	v-if="adminDialog.show" 
		 	:roleId = "adminDialog.roleId" 
		 	v-model:show="adminDialog.show" />
		 </el-dialog>

		 <el-dialog 
		    v-model="resDialog.show"
			width="700px"
			title="权限列表"
			:close-on-click-modal = "false">
			<Res
			v-if="resDialog.show"
			v-model:show="resDialog.show"
			:roleId="resDialog.roleId"
			 />
		 </el-dialog>

	 </div>

		
</template>

<script setup>
import { Avatar } from '@element-plus/icons-vue'
import { _axios } from '@/plugins/axios'
import { ref,reactive } from 'vue'
import Add from './add'
import { get, post } from '@/plugins/axios'
import { ElMessageBox } from 'element-plus'
import url from './util'
import Admin from './admin'

import Res from "./res"


const dialog = reactive({
	show: false,
	title: '',
	id: null
})

const adminDialog = reactive({
	show: false,
	roleId: null
})

const resDialog = reactive({
	show: false,
	roleId: null
})




const tableData = reactive({
	records: [],
	pages: 0,
	total: 0
})
const params = reactive({
	PageNo: 1,
	PageSize: 13
})

function add(){
	dialog.id = null
	dialog.title = "添加角色信息"
	dialog.show = true
}
function update(id){
	dialog.id = id
	dialog.title = "修改角色信息"
	dialog.show = true
}


function del(id,status) {
	const text = status ? '确定要启用该角色吗' : '确定要禁用该角色吗';
	ElMessageBox.confirm(text,'警告',{
		 type: 'warning'
	}).then(() => {
		post(url.del,{id,status}, content => {
			getTableData()
			console.dir("AAAAAAAAAAAAAAAAAAAA")
		})
	}).catch(() => {})
}


function getTableData(){
	get(url.list,params,content => {
		tableData.records = content.records
		tableData.pages = content.pages
		tableData.total = content.total 
		 console.dir(content)
	})
}
getTableData()
function adminList(roleId){
	adminDialog.roleId = roleId
	adminDialog.show = true

}
function resList(roleId){
	resDialog.roleId = roleId
	resDialog.show = true


}
</script>


<style lang="scss" scoped>
.wrapper{
	height: 80vh;
	.util{
		width: 100%;
		height: 50px;
		background-color: #ffffff;
		border-radius: 4px;
		margin-bottom: 20px;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
		display: flex;
    padding-left: 20px;
		align-items: center;
		.span{
			font-size: 14px;
			padding-left: 20px;
		}
	}

	
}
</style>